<template>
	<view v-cloak style="padding-top: 20rpx;">
		<!-- 		<view class="banner" v-if="data.shopimg">
			<image :src="data.shopimg" mode="aspectFill" @click="TanPreviewImage(picurl)" />
		</view> -->
		<view class="shop-details-page">
			<view class="page-module">
				<view class="header">
					{{info.title || '--'}}
				</view>
				<view class="task-item" v-html="info.content || '--'">
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{},
				picurl: ['https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg'],
				type: '0',
				iscollect: false,
				doorplate: "",
				latitude: 23.11966,
				longitude: 113.39499,
				name: "车陂村",
				id: '',
				data: {
					station_name: '公司名称',
					fileLists: [
						'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg'
					]
				},
			}
		},
		onLoad(e) {
			this.id = e.id;

			// type 0充值状态 1提交任务
			if (e.id) {
				this.type = e.type
				this.getdata();
			}
			
		},
		methods: {
			async getdata(){
				this.$H.get('/article/detail',{
					articleId : this.id
				}).then(res => {
					if (res.status == 200) {
						this.info = res.data.detail
						this.islogin = true;
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.banner {
		height: 265rpx;
		width: 100%rpx;
		overflow: hidden;

		swiper {
			height: 100%;
			width: 100%;
		}

		.banner_imgs {
			height: 100%;
			width: 100%;
		}

		image {
			width: 100%;
			height: 100%;
		}
	}

	page {
		background: #f1f1f1;
	}

	.shop-details-page {
		padding: 0px 20rpx;

		.page-module {
			background: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			box-sizing: border-box;
			margin: 20rpx 0px;

			.h1 {
				font-size: 34rpx;
				font-weight: bold;
			}

			.shopimg {
				margin: 20rpx;
				border-radius: 10rpx;
				overflow: hidden;

				image {
					width: 100%;
					border-radius: 10rpx;
					overflow: hidden;
				}
			}

		}
	}

	.shop-describe {
		.li {
			margin-top: 20rpx;

			.Ticonfont {
				color: #666;

				margin-top: 5rpx;

			}

			.liTitle {
				color: #333;
				margin-left: 15rpx;
			}

			.a {
				color: #595ccc;
				text-decoration: underline;
				font-size: 32rpx;
				margin-left: 15rpx;
			}
		}
	}

	.recruit-box {
		background: #fff8f6;
		height: 140rpx;
		margin-top: 30rpx;

		.recruit-item {
			width: 33.33%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.title {
				color: #a68b74;
				font-size: 24rpx;
			}

			.number {
				color: #6d2c10;
				margin-top: 15rpx;
				font-weight: bold;

			}
		}

	}

	.header {
		font-weight: bold;
		position: relative;
	}

	.material-lj {
		position: absolute;
		right: 10rpx;
		top: 0px;
		color: #666;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.h4 {
		color: #999999;
		margin: 20rpx 0px;
	}

	.task-item {
		color: #333;
		margin: 10rpx auto;
		text-indent: 2ch;
	}

	.Releasenotes {
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}

	.richtext {
		font-size: 28rpx;
		color: #333;
		line-height: 2;
	}

	.shop-foot {
		position: fixed;
		bottom: 0px;
		left: 0px;
		height: 120rpx;
		width: 100%;
		background: #fff;
		padding: 0px 10rpx;
		box-sizing: border-box;

		.btn {
			width: 150rpx;
			height: 100%;
			color: #363636;
			padding: 0px;
			line-height: 28rpx;
			margin: 0px;
			font-size: 24rpx;
			border: 0px !important;
			background: none !important;

			text {
				margin-top: 10rpx;
			}
		}

		button {
			background: none;
			border-bottom: none;
			border-left: none;
			border-radius: 0px;

			&::after {
				border: none;
			}
		}

		.recharge {
			background: rgba(23, 191, 139, 1);
			height: 85rpx;
			line-height: 85rpx;
			text-align: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #fff;
			border-radius: 10rpx;
		}
	}

	.colbox {
		width: 210rpx;
		height: 210rpx;
		border-radius: 20rpx;
		overflow: hidden;
		margin: 5px auto;
		border: 1px solid rgba(23, 191, 139, 1);

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>